<script setup>
import ButtonBar from '@/components/common/ButtonBar/index.vue'
import { updateFundPwd } from '@/api/user'
import { showToast } from 'vant'
import { ref, watch } from 'vue'
import { _t18 } from '@/utils/public'
import { useToast } from '@/hook/useToast'

const { _toast } = useToast()
const newPwd = ref(false)
const oldPwd = ref(false)
const NPwd = ref(false)
const form = ref({
  newPwd: '',
  oldPwd: '',
  NPwd: ''
})

const setKeyVal = (val) => {
  if (val == 'oldPwd') oldPwd.value = !oldPwd.value
  else if (val == 'newPwd') newPwd.value = !newPwd.value
  else NPwd.value = !NPwd.value
}

const emit = defineEmits(['setPwd'])
const success = ref(false)
watch(success, (val) => {
  emit('setPwd', val)
})

const showPwdDiff = ref(false)
const pwdDiff = () => {
  showPwdDiff.value = !(form.value.newPwd == form.value.NPwd)
}

const changePwd = () => {
  if (form.value.oldPwd == '') return _toast('Fund_password_pleaseOld')
  if (form.value.newPwd == '') return _toast('Fund_password_pleaseNew')
  if (form.value.newPwd !== form.value.NPwd) return _toast('register_pwd_diff')

  updateFundPwd(form.value.oldPwd, form.value.newPwd, 1).then((res) => {
    if (res.code == '200') {
      _toast('Fund_password_update_success')
      success.value = true
    } else {
      showToast(res.msg)
    }
  })
}
</script>

<template>
  <div class="content">
    <div class="tip">{{ _t18('Old_Password') }}</div>
    <div class="input">
      <svg-load name="mima" class="icon"></svg-load>
      <input :type="oldPwd ? 'text' : 'password'" v-model="form.oldPwd" :placeholder="_t18('login_please')" />
      <svg-load :name="oldPwd ? 'openeyes' : 'closeeyse'" class="icon" @click="setKeyVal('oldPwd')" />
    </div>

    <div class="tip">{{ _t18('New_Password') }}</div>
    <div class="input">
      <svg-load name="mima" class="icon"></svg-load>
      <input :type="newPwd ? 'text' : 'password'" v-model="form.newPwd" :placeholder="_t18('login_please')" />
      <svg-load :name="newPwd ? 'openeyes' : 'closeeyse'" class="icon" @click="setKeyVal('newPwd')" />
    </div>

    <div class="tip">{{ _t18('Confirm_Password') }}</div>
    <div class="input">
      <svg-load name="mima" class="icon"></svg-load>
      <input
        :type="NPwd ? 'text' : 'password'"
        v-model="form.NPwd"
        :placeholder="_t18('login_please')"
        @input="pwdDiff"
      />
      <svg-load :name="NPwd ? 'openeyes' : 'closeeyse'" class="icon" @click="setKeyVal('NPwd')" />
    </div>

    <p class="pwdDiff" v-if="showPwdDiff">*{{ _t18('register_pwd_diff') }}</p>

    <div class="btnBox" @click="changePwd">
      <ButtonBar :btnValue="_t18('btnConfirm', ['bitmake'])" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content {
  padding: 30px 15px 0 15px;

  .tip {
    font-size: 14px;
    color: var(--ex-font-color16);
    margin-bottom: 10px;
    text-align: left;
  }

  /* ✅ 改成白底半圆横条 */
  .input {
    width: 100%;
    height: 50px;
    background: #fff; /* 白底 */
    border: none; /* 去掉边框 */
    border-radius: 25px; /* 半圆横条 */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); /* 柔灰边 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 15px;
    transition: box-shadow 0.2s ease;

    &:focus-within {
      box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.25);
    }

    input {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 10px;
      font-size: 14px;
      color: var(--ex-default-font-color);
      background: transparent;
      border: none;
      outline: none;
    }
  }

  .icon {
    font-size: 16px;
    opacity: 0.8;
    cursor: pointer;
  }

  .btnBox {
    margin-top: 50px;
  }

  .pwdDiff {
    color: var(--ex-font-color14);
  }
}
</style>
